<!--
  文件描述：登录
  创建时间：2023/9/5 11:09
  创建人：二
-->
<template>
  <div class="login" :style="{ backgroundImage: 'url(' + back + ')' }">
    <div class="wrap">
      <header>
        <el-image :src="logo" class="logo"> </el-image>
      </header>
      <div class="main">
        <el-form ref="form" :model="form" :rules="rules" label-width="0">
          <el-form-item prop="userName">
            <el-input
              v-model="form.userName"
              placeholder="请输入账号"
              @keyup.enter.native="submit()"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              placeholder="请输入密码"
              @keyup.enter.native="submit()"
              show-password
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="btnLoading"
              class="btn-login"
              @click="submit()"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { loginApi } from '@/api/login/login.js'
export default {
  name: 'index',
  data() {
    return {
      back: require('@/assets/image/login-bg.jpg'),
      logo: require('@/assets/image/login-logo.png'),
      form: {
        userName: '',
        password: ''
      },
      rules: {
        userName: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      btnLoading: false
    }
  },
  methods: {
    /**
     * 提交
     */
    submit() {
      this.$refs.form.validate( valid => {
        if(valid) {
          this.btnLoading = true;
          loginApi(this.form).then((result) => {
            let data = result.data;
            this.$store.commit('user/setToken', data.token)
            this.$store.commit('user/setName', data.userName)
            this.$store.commit('user/setAvatar', data.avatar)
            this.$store.commit('permission/setPermissions', data.permissions)
            this.$router.push('/')
          }).finally(() => {
            this.btnLoading = false;
          })
        }
        return false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

  .wrap {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    header {
      text-align: center;
      .logo {
        width: 200px;
      }
    }

    .main {
      margin: 32px 0;
      width: 100%;
      background: #fff;
      padding: 32px 32px 10px;
      border-radius: 0 8px 8px 0;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      .btn-login {
        width: 100%;
      }
    }
  }
}
</style>
